import { useState } from 'react'

import { useRealTime } from '@/hooks'

import './index.scss'
import bgImg from '@/assets/images/start/start2.jpg'
import { GoogleSvg, SearchSvg } from '@/assets/svg'

const start = () => {
  const [focus, setFocus] = useState(false)
  const { hours, minutes, week, month, day, lunarYear, lunarMonth, lunarDay, amPm } = useRealTime()

  return (
    <div className='start-bx'>
      <div className={focus ? 'cover focus' : 'cover'}>
        <img src={bgImg} alt='background' className={focus ? 'focus' : ''} />
        <div className='gray'></div>
      </div>
      <main className='main'>
        <div className={focus ? 'focus time-container' : 'time-container'}>
          <div className='time'>
            <span>{hours}</span>
            <span className='separator'>:</span>
            <span>{minutes}</span>
            <span className='amPm'>{amPm}</span>
          </div>
          <div className='luna'>
            <span className='year'>{lunarYear}</span>
            <span>
              {lunarMonth}月{lunarDay}
            </span>
          </div>
          <div className='date'>
            <span className='month'>{month}</span>
            <span className='day'>{day}</span>
            <span className='week'>{week.solar}</span>
            <span>{week.lunar}</span>
          </div>
        </div>
        <div className={focus ? 'sea-inp-bx focus' : 'sea-inp-bx'}>
          {focus && <div className='mask' onClick={() => setFocus(false)}></div>}
          <div className='all'>
            <div className='engine'>
              <GoogleSvg />
            </div>
            <input
              type='text'
              onClick={(e) => e.stopPropagation()}
              placeholder='搜点什么吧'
              onFocus={() => setFocus(true)}
              id='main-input'
            />
            <div className='go'>
              <SearchSvg />
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

export default start
